// pages/cut-avator/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  renderImg() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = 150 * dpr
        canvas.height = 150 * dpr
        console.log('canvas.height', canvas.height);
        console.log('canvas.width', canvas.width);
        ctx.scale(dpr, dpr)
        //ctx.fillRect(0, 0, 100, 150)
        ctx.clearRect(0,0,500,600);
        //图片对象
        const image = canvas.createImage()
        // 图片加载完成回调
        image.onload = () => {
          // 将图片绘制到 canvas 上
          // ctx.drawImage(image, 0, 0,100,100);
          ctx.drawImage(image, 60, 100, 200, 200, 0, 0, 200, 200);
          this.clearRect();
        }
        const  canvasW = 300;
        const imgW = image.width;
        // 设置图片src
        image.src = 'https://img0.baidu.com/it/u=2880518663,495982857&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664211600&t=1ad8814c793f38742c2860a5fbb95299'
         // 将图片绘制到画布
      })
  },

  clearRect(){
    const ctx = wx.createCanvasContext('myCanvas')

ctx.draw(true)
  },

  handleGetAttr(){
    this.renderImg();
    wx.createSelectorQuery().select('#myCanvas').boundingClientRect(function(rect){
      // rect.id      // 节点的ID
      // rect.dataset // 节点的dataset
      // rect.left    // 节点的左边界坐标
      // rect.right   // 节点的右边界坐标
      // rect.top     // 节点的上边界坐标
      // rect.bottom  // 节点的下边界坐标
      // rect.width   // 节点的宽度
      // rect.height  // 节点的高度
      console.log('渲染高度', rect.width, rect.height);
    }).exec()
  }
});